<template>
  <nav class="tabbar">
    <div @click="click('list')">
      <van-icon name="bars" />
      <p>目录</p>
    </div>
    <div @click="click('near')">
      <van-icon name="underway-o" />
      <p>最近阅读</p>
    </div>
    <div @click="click('set')">
      <van-icon name="setting-o" />
      <p>设置</p>
    </div>
    <div @click="click('theme')">
      <!-- 夜间 -->
      <van-icon name="closed-eye" v-show="!isDark"/>
      <p v-show="!isDark">夜间模式</p>
      <!-- 日间 -->
      <van-icon name="eye-o" v-show="isDark" />
      <p v-show="isDark">日间模式</p>
    </div>
    <p class="set-wrap" v-show="isSet">
      字号
      <a href="javascript:;" class="f-r" @click="config('add')">A+</a>
      <a href="javascript:;" class="f-r" @click="config('sub')">A-</a>
    </p>
  </nav>
</template>

<script>
export default {
  data(){
    return {
      isSet:false,
      isDark:false
    }
  },
  methods:{
    click(name){
      switch(name){
        case 'theme':
          this.isDark = !this.isDark;break;
        case 'set':
          this.isSet = !this.isSet;break;
      }
      this.$emit(name)
    },
    config(type){
      this.$emit('config',type)
    }
  }
}
</script>

<style scoped>
/* 底部导航 */
.tabbar{
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50PX;
  display: flex;
  box-shadow: 0 -1PX 4PX rgba(0,0,0,0.05);
}
.tabbar>div{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tabbar>div>i{
  font-size: 20PX;
}
.tabbar>div>p{
  font-size: 12PX;
}
.set-wrap{
  position: absolute;
  bottom: 50PX;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  line-height: 45PX;
  font-size: 16PX;
  padding: 0px 15PX;
  background: #fff;
}
.set-wrap>a{
  display: block;
  width: 20%;
  line-height: 30PX;
  text-align: center;
  margin: 7PX 0 0 10PX;
  border-radius: 99PX;
  color: inherit;
  border: 1px solid #D2CDC8;
}
</style>